<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-23 21:30:50
component:     orderRemark
Copyright © YourCompanyName All rights reserved
-->
<template>
  <el-dialog
    :destroy-on-close="true"
    title="订单备注"
    v-model="isVisible"
    @close="handleClose"
    width="600px"
  >
    <el-input type="textarea" v-model="remark" placeholder="请输入订单备注内容" />
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { createOrderNote } from '@/api/order/all'
import { ref, watch, defineProps, defineEmits } from 'vue'

// 定义组件的 props
interface Props {
  visible: boolean
  remarkId: number | undefined
}

// 获取 props 和 emits
const props = defineProps<Props>()
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void // 添加 success 事件
}>()

// 局部状态变量，用于管理弹窗的可见性
const isVisible = ref<boolean>(props.visible)
const remark = ref<string>('')
const loading = ref(false)

// 关闭弹窗的处理函数
const handleClose = () => {
  isVisible.value = false // 设置局部状态
  emit('update:visible', false) // 通知父组件
  remark.value = ''
}

// 保存备注的处理函数
const handleSave = async () => {
  loading.value = true
  try {
    await createOrderNote({
      orderId: props.remarkId || 0,
      noteContent: remark.value
    })
    emit('success') // 通知父组件
    handleClose() // 保存后关闭弹窗
    loading.value = false
  } catch (e) {
    loading.value = false
    console.error(e)
  }
}
// 监视 props.visible 的变化，以更新局部状态
watch(
  () => props.visible,
  (newValue) => {
    isVisible.value = newValue
  }
)
</script>
